<template>
  <ActionPanel>
    <ElTable :data="data">
      <ElTableColumn prop="name" label="名称">
        <template #="{ row }">
          <ElInput v-model="row.name" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="类型">
        <template #="{ row }">
          <ElSelect v-model="row.type">
            <ElOption v-for="(value, key) in statTypeOptions" :label="value" :value="key" :key="key" />
          </ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="标签">
        <template #="{ row }">
          <ElInput v-model="row.label" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="注释">
        <template #="{ row }">
          <ElInput v-model="row.comment" />
        </template>
      </ElTableColumn>
      <ElTableColumn v-if="seedName" label="申明">
        <template #="{ row }">
          <DeclareEditor :seed-name="seedName" v-model="row.declare" />
        </template>
      </ElTableColumn>
      <ElTableColumn v-if="seedName" label="条件">
        <template #="{ row }">
          <SearchesEditor v-model="row.searches" :seed-name="seedName" :key="seedName" />
        </template>
      </ElTableColumn>
      <ElTableColumn :width="60">
        <template #header>
          <ElButton type="primary" size="small" link @click="add">新增</ElButton>
        </template>
        <template #="{ $index }">
          <ElButton type="danger" size="small" link @click="remove($index)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <template #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn } from 'element-plus'
  import { getAction, getSeed } from '@/views/seed-dev'
  import { computed, inject, ref } from 'vue';
  import feedback from '@/utils/feedback';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { StatConfiguration } from '@/views/dev-types';
  import { statTypeOptions } from '..';
  import { DeclareEditor } from '../../DeclarsEditor';
  import { SearchesEditor } from '../../SearchesEditor';

  const props = defineProps<{seedName?: string, actionName?: string}>()
  const seedName = computed(() => props.seedName || getAction(props.actionName).seedName)
  const data = ref<StatConfiguration[]>([])

  function add() {
    data.value.push({})
  }

  function remove(index: number) {
    data.value.splice(index, 1)
  }

  const close = inject<() => void>(closePopupKey, void 0)
  function validate() {
    for(const i in data.value) {
      const row = data.value[i]
      const name = row.name
      if (!name) {
        feedback.alertError(`第${i}行名称不能为空`)
        return false
      }

      let stats
      if(props.seedName) {
        const seed = getSeed(props.seedName)
        if(props.actionName) {
          const action = seed.actions?.[props.actionName]
          if(!action) return true

          stats = action.stats
        } else {
          stats = seed.stats
        }
      } else {
        const action = getAction(props.actionName)
        stats = action.stats
      }

      if(!stats) return true

      if(Object.keys(stats).includes(name)) {
        feedback.alertError(`统计【${name}】已存在`)
        return false
      }
    }

    return true
  }

  function doSave() {
    if(data.value.length === 0 || !validate()) return

    let stats
    if(props.seedName) {
      const seed = getSeed(props.seedName)
      if(props.actionName) {
        const action = seed.actions?.[props.actionName]
        action.stats = action.stats || {}
        stats = action.stats
      } else {
        seed.stats = seed.stats || {}
        stats = seed.stats
      }
    } else {
      const action = getAction(props.actionName)
      action.stats = action.stats || {}
      stats = action.stats
    }

    for(const row of data.value) {
      const name = row.name
      delete row.name
      stats[name] = row
    }
    
    close?.()
  }
</script>